<template>
    <!-- <transition> -->
    <div>
        <div class="left" :class="{ hide: !showPanel }">
            <Panel title="运营统计">
                <!-- content插槽 -->
                <template #content>
                    <OperateChart />
                </template>
            </Panel>
            <Panel title="地铁活动">
                <template #content>
                    <SubwayActivity />
                </template>
            </Panel>
            <Panel title="客流指标">
                <template #content>
                    <PassengerFlow />
                </template>
            </Panel>
        </div>
        <div class="right" :class="{ hide: !showPanel }">
            <Panel title="线路概览">
                <template #content>
                    <Overview />
                </template>
            </Panel>
            <Panel title="告警趋势">
                <template #content>
                    <HistoryWorng />
                </template>
            </Panel>
            <Panel title="实时影像">
                <template #content>
                    <HlsLive/>
                </template>
            </Panel>
        </div>
    </div>
    <!-- </transition> -->
</template>

<script setup>
import Panel from "./Panel.vue";
import OperateChart from "./OperateChart.vue";
import SubwayActivity from "./SubwayActivity.vue";
import PassengerFlow from "./PassengerFlow.vue";
import Overview from "./Overview.vue";
import HistoryWorng from "./HistoryWorng.vue";
import HlsLive from "./HlsLive.vue";

//获取路由
import { useRoute } from "vue-router";
import { watch, ref } from "vue";
const route = useRoute();
const showPanel = ref(true);
watch(route, () => {
    if (route.path === "/station") {
        showPanel.value = false;
    } else {
        showPanel.value = true;
    }
});
</script>

<style scoped>
.left,
.right {
    position: absolute;
    top: 100px;
    bottom: 100px;
    width: 27%;
    height: calc(100% - 200px);
    display: grid;
    gap: 20px;
    /* 子元素高度相同 */
    grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
    /* background-color: aliceblue; */
    transition: all 1s ease-in-out;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
.left.hide {
    left: -27%;
}
.right.hide {
    right: -27%;
}
</style>
